<template>
  <div class="app-container">

    <div v-if="box1">
      <div style="display: flex;justify-content: center">
      <div class="mes-box">
        <img src="@/assets/images/jqr1.png" width="188px" height="156px" alt="dark">
        <Progress style="width: 500px" :progress="progress1"/>
        <span>直角坐标机器人1号<span v-if="progress1 === 100" style="color: #3AB95C">（自检完成）</span></span>
        <img v-if="progress1 === 100" class="mes-box-img" src="@/assets/images/success-loding.png" width="128px" height="128px" alt="dark">
      </div>
      <div class="mes-box">
        <img src="@/assets/images/jqr2.png" width="146px" height="156px" alt="dark">
        <Progress style="width: 500px" :progress="progress2"/>
        <span>直角坐标机器人2号<span v-if="progress2 === 100" style="color: #3AB95C">（自检完成）</span></span>
        <img  v-if="progress2 === 100" class="mes-box-img" src="@/assets/images/success-loding.png" width="128px" height="128px" alt="dark">
      </div>
      <div class="mes-box">
        <img src="@/assets/images/xzjqr.png" width="172px" height="156px" alt="dark">
        <Progress style="width: 500px" :progress="progress3"/>
        <span>协作机器人<span v-if="progress3 === 100" style="color: #3AB95C">（自检完成）</span></span>
        <img  v-if="progress3 === 100" class="mes-box-img" src="@/assets/images/success-loding.png" width="128px" height="128px" alt="dark">
      </div>
      </div>
      <div style="display: flex;justify-content: center">
        <div class="mes-box2">
          <img src="@/assets/images/xj.png" width="233px" height="156px" alt="dark">
          <Progress style="width: 750px" :progress="progress4"/>
          <span>相机1号<span v-if="progress4 === 100" style="color: #3AB95C">（自检完成）</span></span>
          <img  v-if="progress4 === 100" class="mes-box-img" src="@/assets/images/success-loding.png" width="128px" height="128px" alt="dark">
        </div>
        <div class="mes-box2">
          <img src="@/assets/images/xj.png" width="233px" height="156px" alt="dark">
          <Progress style="width: 750px" :progress="progress5"/>
          <span>相机2号<span v-if="progress5 === 100" style="color: #3AB95C">（自检完成）</span></span>
          <img  v-if="progress5 === 100" class="mes-box-img" src="@/assets/images/success-loding.png" width="128px" height="128px" alt="dark">
        </div>
      </div>
    </div>

    <div v-if="box2">
      <div style="display: flex;justify-content: center;align-items: center">
        <div style="display: flex;flex-direction: column;align-items: center">
          <img src="@/assets/images/success-icon.png" width="300px" height="300px" alt="dark">
          <span style="color:#3AB95C;font-size: 30px;margin-top: 20px">1000</span>
        </div>
        <div style="width: 800px;height: 600px" v-if="!showOperation"></div>
        <img width="800px" height="600px" v-if="!showAction && showOperation" src="@/assets/images/operation-icon.webp"
             alt="dark">
        <img width="800px" height="600px" v-if="showAction && showOperation" src="@/assets/images/operation-icon.png"
             alt="dark">
        <div style="display: flex;flex-direction: column;align-items: center">
          <img src="@/assets/images/error-icon.png" width="300px" height="300px" alt="dark">
          <span style="color:#FA8500;font-size: 30px;margin-top: 20px">NG:30</span>
        </div>
      </div>
      <div style="display: flex;flex-direction:column;justify-content: center;align-items: center;font-family: Microsoft YaHei;font-weight: 400;font-size: 18px;color: #888888;" >
        <span>系统运行时间：55min32s（2024年3月16日8:00:00--2024年3月16日8:55:32）</span>
        <span>系统当前时间：2024年3月16日8:57:33</span>
        <span>系统检测次数：6次</span>
      </div>
    </div>

    <div style="display: flex;justify-content: center;align-items: center;margin-top: 30px">
      <div class="button-class" @click="inspectClick" v-if="showInspect">
        <img src="@/assets/images/inspect-icon.png" width="35px" height="34px" alt="dark">
      </div>
      <div class="button-class" @click="actionAndStopClick" v-if="showActionAndStop">
        <img v-if="showAction" src="@/assets/images/action-icon.png" width="30px" height="36px" alt="dark">
        <img v-if="!showAction" src="@/assets/images/stop-icon.png" width="22px" height="30px" alt="dark">
      </div>
      <div class="button-class" @click="terminateClick" v-if="showTerminate">
        <img src="@/assets/images/terminate-icon.png" width="30px" height="30px" alt="dark">
      </div>
    </div>
  </div>
</template>

<script>
import Progress from '@/components/TaskProgress'

export default {
  name: "activate",
  components: {Progress},
  data() {
    return {
      showAction: true,
      showOperation: false,
      percent: 10,
      progress1: 0,
      progress2: 0,
      progress3: 0,
      progress4: 0,
      progress5: 0,
      timerId: null,
      box1:true,
      box2:false,
      showInspect:true,
      showTerminate:true,
      showActionAndStop:true,
    }
  },
  methods: {
    inspectClick() {
      this.timerId = setInterval(() => {
        if(this.progress1 < 100){
          this.progress1 = this.progress1 + 10;
        }else if(this.progress2 < 100){
          this.progress2 = this.progress2 + 10;
        }else if(this.progress3 < 100){
          this.progress3 = this.progress3 + 10;
        }else if(this.progress4 < 100){
          this.progress4 = this.progress4 + 10;
        }else if(this.progress5 < 100){
          this.progress5 = this.progress5 + 10;
        }
        if (this.progress1 === 100 && this.progress2 === 100 && this.progress3 === 100 && this.progress4 === 100 && this.progress5 === 100) {
          this.$modal.msgSuccess("全部自检完成");
          this.showInspect = false;
          this.showActionAndStop = true;
          this.box1 = false;
          this.box2 = true;
          clearInterval(this.timerId);
        }
      }, 100);
      this.showOperation = true;
    },
    actionAndStopClick() {
      if (this.progress1 === 100 && this.progress2 === 100 && this.progress3 === 100 && this.progress4 === 100 && this.progress5 === 100) {

        this.showTerminate = true;
        this.showAction = !this.showAction;
      }else {
        this.$modal.msgError("请先进行自检");
      }
    },
    terminateClick() {
      this.showAction = true;
      this.showTerminate = false;
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.mes-box-img{
  position: absolute;
  top: 50px;
}
.mes-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 530px;
  height: 317px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 10px 30px;
}

.mes-box span {
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 16px;
  color: #212C37;
  margin-top: 50px;
}

.mes-box2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 823px;
  height: 317px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 10px 30px;
}

.mes-box2 span {
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  font-size: 16px;
  color: #212C37;
  margin-top: 50px;
}

.button-class {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../../../assets/images/button-box.png");
  background-size: cover;
  width: 100px;
  height: 100px;
  margin-left: 50px;
  color: white;
  border: none;
}

.button-class:hover {
  cursor: pointer;
  current-color: #fff;
}
</style>
